<!--  -->
<template>
  <div class='pagination_box'>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      style="text-align:center;"
      :current-page.sync="tablePage.curPage"
      :page-size="tablePage.pageSize"
      :page-sizes="[10, 30, 50, 100]"
      :total="tablePage.totalRows"
      @size-change="sizeChangeFun"
      @current-change="currentChangeFun"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      
    }
  },

  created() {
    
  },

  methods: {
    sizeChangeFun(val) {
      // this.$parent.tablePage.pageSize = val;
      // this.$parent.initData();
      this.findInitData(this, 'sizeChange', val);
    },
    currentChangeFun(val) {
      // this.$parent.initData();
      this.findInitData(this);
    },

    findInitData(context, type, val) { 
      // 递归查找 parent 的 initData
      let parent = context.$parent;
      if(parent.initData) {
        if(type == 'sizeChange') {
          parent.tablePage.pageSize = val
        }
        parent.initData();
      }else{
        this.findInitData(context.$parent, type, val)
      }
      
    }
  },

  props: ['tablePage']
}
</script>

<style scoped>
.pagination_box {
  position: relative;
}
</style>